<template>
    <div class="domain-login">
        <el-dialog :visible.sync="LoginDialogTableVisible" custom-class="login-dialog" :before-close="closeDialog" top="25vh">
            <el-form :model="login" label-width="70px"  >
                <el-form-item label="用户名">
                    <el-col :span="18">
                        <el-input placeholder="请输入用户名" v-model="login.account" autocomplete="off"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="密码">
                    <el-col :span="18">
                        <el-input placeholder="请输入密码" v-model="login.password" show-password></el-input>
                    </el-col>
                    &nbsp;&nbsp;<a href="javascript:void(0)" style="font-size:12px">忘记密码</a>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="login.remember">记住密码</el-checkbox>
                </el-form-item>
            </el-form>
            <div class="login-buttom">
                <el-button type="primary" @click="loginSubmit">&nbsp;&nbsp;&nbsp;&nbsp;登录&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
                <el-button type="primary" @click="showRegister(true)">立即注册</el-button>
            </div>
        </el-dialog>
        <!-- 登录组件 -->
        <register_from :registerDialogVisible="showRegister_Dialog" @showRegister="showRegister(false)"></register_from>
    </div>
</template>

<script>
import {post} from '../../utils/httpRequest'
import register_from from './register'
export default {
    components:{
        register_from
    },
    data(){
        return {
            login:{
                account:"",
                password:"",
                remember:true,
                platform:"pdd_blog_web"
            },
            showRegister_Dialog:false
        };
    },
    methods:{
        showRegister(result){
            this.showRegister_Dialog=result;
        },
        closeDialog(){
            this.$emit("showLogin",false)
        },
        loginSubmit(){
            post(this.http.account_tourist.login,this.login).then((response)=>{
                if(response.success){
                    response.data.islogin=true;
                    this.$store.commit("setLoginInfo",JSON.stringify(response.data))
                    this.closeDialog();
                    location.reload();
                }
            })
        }
    },
    props:{
        LoginDialogTableVisible: Boolean
    }
}
</script>

<style scoped>
.el-button{
    margin: 0px 15px;
}
.login-buttom{
    text-align: center;
}
.el-form-item {
    margin-bottom: 10px;
}
</style>
<style>
.login-dialog{
    width: 420px;
}
@media screen and (max-width: 500px){
    .login-dialog{
        width: 400px;
    }
}
</style>